<template>
  <div>
    <!-- {{msg}} -->
    <!-- 三方的 tabbar -->
    <!-- <mt-tabbar :selected.sync="selected" fixed="true">
      <mt-tab-item :id="item.name" v-for="(item, index) in lists" :key="index">
        <img slot="icon" v-lazy="item.imgUrl">
        {{item.name}}
      </mt-tab-item>
    </mt-tabbar>-->

    <XHTabbar>
      <XHTabbarItem
        @handleClick="itemClick"
        :cmodel="item"
        :selected="index===nowSelected"
        v-for="(item, index) in lists"
        :key="index"
      >
      </XHTabbarItem>
    </XHTabbar>
  </div>
</template>


<script>
// 引入要使用的组件
//import Home from '@/components/HelloWorld'
import imgNameUrl from "../../config/imgName";
import XHTabbar from "./XHTabbar";
import XHTabbarItem from "./XHTabbarItem";

export default {
  name: "xxx",
  data() {
    return {
      // 数据初始化  init
      msg: "tabbar",
      tabbarImage1: "../../assets/logo.png",
      lists: [
        {
          name: "首页",
          index: 0,
          imgUrl: imgNameUrl.tabbar1.selectedImageName,
          imgUrlUN: imgNameUrl.tabbar1.unSelectedImageName,
          path: "/Home"
        },
        {
          name: "发现",
          index: 1,
          imgUrl: imgNameUrl.tabbar2.selectedImageName,
          imgUrlUN: imgNameUrl.tabbar2.unSelectedImageName,
          path: "/Discover"
        },
        {
          name: "商城",
          index: 2,
          imgUrl: imgNameUrl.tabbar3.selectedImageName,
          imgUrlUN: imgNameUrl.tabbar3.unSelectedImageName,
          path: "/Mall"
        },
        {
          name: "我的",
          index: 3,
          imgUrl: imgNameUrl.tabbar4.selectedImageName,
          imgUrlUN: imgNameUrl.tabbar4.unSelectedImageName,
          path: "/Mine"
        }
      ],
      selected: "",
      reveiveModle: {}
    };
  },
  methods: {
    // 所有方法在这里实现
    //clickAction(){
    //我是例子
    //}
    itemClick(params) {
      this.reveiveModle = params;
      const path =  params.path
      this.$router.push(path)
    }
  },
  mounted() {
    //获取 DOM 节点 == viewDidLoad
  },
  props: {
    //给父类传值
  },
  components: {
    XHTabbar,
    XHTabbarItem
  },
  computed: {
    nowSelected() {
      console.log("接受：" + JSON.stringify(this.reveiveModle));
      if (this.reveiveModle.index) {
        const index = this.reveiveModle.index;
        return index;
      }
      return 0;
    }
  }
};
</script>
<style scoped>
/* 样式处理 */
</style>